<template>
  <b-navbar data-cy="navbar" toggleable="md" type="<%_ if (clientTheme === 'none' || clientThemeVariant !== 'light') { _%>dark<%_ } else { _%>light<%_ } _%>" class="<%_ if (clientTheme === 'none') { _%>jh-navbar<%_ } else { _%>bg-<%= clientThemeVariant %><%_ } _%>">
    <b-navbar-brand class="logo" b-link to="/">
        <span class="logo-img"></span>
        <span v-text="$t('global.title')" class="navbar-title"><%= baseName %></span> <span class="navbar-version">{{version}}</span>
    </b-navbar-brand>
    <b-navbar-toggle
      right
      class="jh-navbar-toggler d-lg-none"
      href="javascript:void(0);"
      data-toggle="collapse"
      target="header-tabs"
      aria-expanded="false"
      aria-label="Toggle navigation">
        <font-awesome-icon icon="bars" />
    </b-navbar-toggle>

    <b-collapse is-nav id="header-tabs">
      <b-navbar-nav class="ml-auto">
        <b-nav-item to="/" exact>
          <span>
            <font-awesome-icon icon="home" />
            <span v-text="$t('global.menu.home')">Home</span>
          </span>
        </b-nav-item>
        <b-nav-item-dropdown
          right
          id="entity-menu"
          v-if="authenticated"
          active-class="active" class="pointer"
          data-cy="entity">
          <span slot="button-content" class="navbar-dropdown-menu">
            <font-awesome-icon icon="th-list" />
            <span v-text="$t('global.menu.entities.main')">Entities</span>
          </span>
          <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->
        </b-nav-item-dropdown>
        <b-nav-item-dropdown
          right
          id="admin-menu"
          v-if="hasAnyAuthority('ROLE_ADMIN') && authenticated"
          :class="{'router-link-active': subIsActive('/admin')}"
          active-class="active"
          class="pointer"
          data-cy="adminMenu">
          <span slot="button-content" class="navbar-dropdown-menu">
            <font-awesome-icon icon="users-cog" />
            <span v-text="$t('global.menu.admin.main')">Administration</span>
          </span>
          <%_ if (applicationType === 'gateway' && serviceDiscoveryType) { _%>
          <b-dropdown-item to="/admin/gateway" active-class="active">
            <font-awesome-icon icon="road" />
            <span v-text="$t('global.menu.admin.gateway')">Gateway</span>
          </b-dropdown-item>
          <%_ } _%>
          <%_ if (!skipUserManagement) { _%>
          <b-dropdown-item to="/admin/user-management" active-class="active">
            <font-awesome-icon icon="users" />
            <span v-text="$t('global.menu.admin.userManagement')">User management</span>
          </b-dropdown-item>
          <%_ } _%>
          <%_ if (websocket === 'spring-websocket') { _%>
          <b-dropdown-item to="/admin/tracker" active-class="active">
            <font-awesome-icon icon="eye" />
            <span v-text="$t('global.menu.admin.tracker')">User tracker</span>
          </b-dropdown-item>
          <%_ } _%>
          <b-dropdown-item  to="/admin/metrics" active-class="active">
            <font-awesome-icon icon="tachometer-alt" />
            <span v-text="$t('global.menu.admin.metrics')">Metrics</span>
          </b-dropdown-item>
          <b-dropdown-item to="/admin/health" active-class="active">
            <font-awesome-icon icon="heart" />
            <span v-text="$t('global.menu.admin.health')">Health</span>
          </b-dropdown-item>
          <b-dropdown-item  to="/admin/configuration" active-class="active">
            <font-awesome-icon icon="cogs" />
            <span v-text="$t('global.menu.admin.configuration')">Configuration</span>
          </b-dropdown-item>
          <b-dropdown-item  to="/admin/logs" active-class="active">
            <font-awesome-icon icon="tasks" />
            <span v-text="$t('global.menu.admin.logs')">Logs</span>
          </b-dropdown-item>
          <b-dropdown-item v-if="openAPIEnabled"  to="/admin/docs" active-class="active">
            <font-awesome-icon icon="book" />
            <span v-text="$t('global.menu.admin.apidocs')">API</span>
          </b-dropdown-item>
          <%_ if (devDatabaseType === 'h2Disk' || devDatabaseType === 'h2Memory' || devDatabaseType === 'couchbase') { _%>
          <b-dropdown-item v-if="!inProduction"  href='<% if (devDatabaseType === 'couchbase') { %>http://localhost:8091/<% } else { %>./h2-console<% } %>' target="_tab">
            <font-awesome-icon icon="database" />
            <span v-text="$t('global.menu.admin.database')">Database</span>
          </b-dropdown-item>
          <%_ } _%>
        </b-nav-item-dropdown>
        <%_ if (enableTranslation) { _%>
        <b-nav-item-dropdown id="languagesnavBarDropdown" right v-if="languages && Object.keys(languages).length > 1">
          <span slot="button-content">
            <font-awesome-icon icon="flag" />
            <span v-text="$t('global.menu.language')">Language</span>
          </span>
          <b-dropdown-item v-for="(value, key) in languages" :key="`lang-${key}`" v-on:click="changeLanguage(key);"
              :class="{ active: isActiveLanguage(key)}">
            {{value.name}}
          </b-dropdown-item>
        </b-nav-item-dropdown>
        <%_ } _%>
        <b-nav-item-dropdown
          right
          href="javascript:void(0);"
          id="account-menu"
          :class="{'router-link-active': subIsActive('/account')}"
          active-class="active"
          class="pointer"
          data-cy="accountMenu">
          <span slot="button-content" class="navbar-dropdown-menu">
            <font-awesome-icon icon="user" />
            <span v-text="$t('global.menu.account.main')">
              Account
            </span>
          </span>
          <%_ if (!skipUserManagement) { _%>
          <b-dropdown-item data-cy="settings" to="/account/settings" tag="b-dropdown-item" v-if="authenticated" active-class="active">
            <font-awesome-icon icon="wrench" />
            <span v-text="$t('global.menu.account.settings')">Settings</span>
          </b-dropdown-item>
          <b-dropdown-item data-cy="passwordItem" to="/account/password" tag="b-dropdown-item" v-if="authenticated" active-class="active">
            <font-awesome-icon icon="lock" />
            <span v-text="$t('global.menu.account.password')">Password</span>
          </b-dropdown-item>
          <%_ } _%>
          <%_ if (authenticationType === 'session' && !skipUserManagement) { _%>
          <b-dropdown-item to="/account/sessions" tag="b-dropdown-item" v-if="authenticated" active-class="active">
            <font-awesome-icon icon="cloud" />
            <span v-text="$t('global.menu.account.sessions')">Sessions</span>
          </b-dropdown-item>
          <%_ } _%>
          <b-dropdown-item data-cy="logout" v-if="authenticated"  v-on:click="logout()" id="logout" active-class="active">
            <font-awesome-icon icon="sign-out-alt" />
            <span v-text="$t('global.menu.account.logout')">Sign out</span>
          </b-dropdown-item>
          <b-dropdown-item data-cy="login" v-if="!authenticated"  v-on:click="openLogin()" id="login" active-class="active">
            <font-awesome-icon icon="sign-in-alt" />
            <span v-text="$t('global.menu.account.login')">Sign in</span>
          </b-dropdown-item>
          <%_ if (!skipUserManagement) { _%>
          <b-dropdown-item data-cy="register" to="/register" tag="b-dropdown-item" id="register" v-if="!authenticated" active-class="active">
            <font-awesome-icon icon="user-plus" />
            <span v-text="$t('global.menu.account.register')">Register</span>
          </b-dropdown-item>
          <%_ } _%>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</template>

<script lang="ts" src="./jhi-navbar.component.ts">
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  /* ==========================================================================
    Navbar
    ========================================================================== */
  .navbar-version {
    font-size: 10px;
    <%_ if (clientTheme === 'none') { _%>
    color: #ccc;
    <%_ } _%>
  }

  <%_ if (clientTheme === 'none') { _%>
  .jh-navbar {
    background-color: #353d47;
    padding: 0.2em 1em;
  }

  .jh-navbar .profile-image {
    margin: -10px 0px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
  }

  .jh-navbar .dropdown-item.active,
  .jh-navbar .dropdown-item.active:focus,
  .jh-navbar .dropdown-item.active:hover {
    background-color: #353d47;
  }

  .jh-navbar .dropdown-toggle::after {
    margin-left: 0.15em;
  }

  .jh-navbar ul.navbar-nav {
    padding: 0.5em;
  }

  .jh-navbar .navbar-nav .nav-item {
    margin-left: 1.5rem;
  }

  .jh-navbar a.nav-link {
    font-weight: 400;
  }

  .jh-navbar .jh-navbar-toggler {
    color: #ccc;
    font-size: 1.5em;
    padding: 10px;
  }

  .jh-navbar .jh-navbar-toggler:hover {
    color: #fff;
  }
  <%_ } _%>

  @media screen and (min-width: 768px) {
    .jh-navbar-toggler {
      display: none;
    }
  }

  @media screen and (min-width: 768px) and (max-width: 1150px) {
    span span{
      display:none;
    }
  }

  .navbar-title {
    display: inline-block;
    vertical-align: middle;
    <%_ if (clientTheme === 'none' && clientThemeVariant !== 'dark') { _%>
    color: white;
    <%_ } _%>
  }

  /* ==========================================================================
    Logo styles
    ========================================================================== */
  .navbar-brand.logo {
    padding: 5px 15px;
  }

  .logo .logo-img {
    height: 45px;
    display: inline-block;
    vertical-align: middle;
    width: 70px;
  }

  .logo-img {
    height: 100%;
    background: url("../../../content/images/logo-jhipster.png") no-repeat center
      center;
    background-size: contain;
    width: 100%;
    filter: drop-shadow(0 0 0.05rem white);
  }
</style>
